<template>
  <view class="tui-tabbar" :class="{'tui-tabbar-fixed':isFixed,'tui-unlined':unlined}">
    <block v-for="(item,index) in tabBar" :key="index">
      <view class="tui-tabbar-item" :class="{'tui-item-hump':item.hump}"
        @tap="tabbarSwitch(index,item.hump,item.pagePath,item.verify)">
        <view class="tui-icon-box" :class="{'tui-tabbar-hump':item.hump}">
          <image :src="current==index?item.selectedIconPath:item.iconPath" :class="[item.hump?'':'tui-tabbar-icon']"></image>
          <view :class="[item.isDot?'tui-badge-dot':'tui-badge']"
            v-if="item.num">{{item.isDot?"":item.num}}</view>
        </view>
        <view class="tui-text-scale" :class="{'tui-text-hump':item.hump}" :style="{color:current==index?selectedColor:color}">{{item.text}}</view>
      </view>
    </block>
    <view :class="{'tui-hump-box':hump}" v-if="hump && !unlined"></view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex';
  import {
    handleUrlParam
  } from '@/utils/index.js';
  import stringify from "@/utils/querystring";
  import {
    scanQrcode
  } from '@/api/public.js';
  import {
    postCartAdd
  } from '@/api/store.js';
  import {
    VUE_APP_API_URL
  } from '@/config/index.js';
  export default {
    name: "tuiTabbar",
    props: {
      //字体颜色
      color: {
        type: String,
        default: "#666"
      },
      //字体选中颜色
      selectedColor: {
        type: String,
        default: "#FF6443"
      },
      //背景颜色
      backgroundColor: {
        type: String,
        default: "#FFFFFF"
      },
      //是否需要中间凸起按钮
      hump: {
        type: Boolean,
        default: true
      },
      //固定在底部
      isFixed: {
        type: Boolean,
        default: true
      },
      //角标字体颜色
      badgeColor: {
        type: String,
        default: "#fff"
      },
      //角标背景颜色
      badgeBgColor: {
        type: String,
        default: "#F74D54"
      },
      unlined: {
        type: Boolean,
        default: false
      }

    },
    computed: mapState(["tabBarIndex", "tabBar"]),
    created() {
      this.current = this.tabBarIndex
    },
    watch: {
      tabBarIndex() {
        this.current = this.tabBarIndex
      }
    },
    data() {
      return {
        current: 0
      };
    },
    methods: {
      ...mapMutations(['changeTabBar']),
      tabbarSwitch(index, hump, pagePath, verify) {
        console.log(index, 'index')
        let that = this;
        if (verify) {
          if (index !== 1) {
            if (index == this.current) {
              return
            }
            this.changeTabBar({
              index: index
            })
            uni.reLaunch({
              url: pagePath
            })
          } else {
            if (this.$store.getters.token) {
              uni.scanCode({
                scanType: 'qrCode',
                success: async (res) => {
                  uni.removeStorageSync('deviceQuery');
                  let result = handleUrlParam(res.result);
                  console.log(result, 'scancode')
                  let scparm = stringify(result);
                  console.log(scparm, 'parseurl')
                  let scanPost = await scanQrcode(`/device/qrcode?${scparm}`);
                  console.log(scanPost, 'res');
                  let that = this;
                  if (scanPost.status == 200) {
                    // this.$yrouter.push({
                    //   path: '/pages/shop/GoodsCon/index',
                    //   query: {
                    //     id: scanPost.data.storeInfo.id,
                    //     machinenum: scanPost.data.storeInfo.machinenum,
                    //     aislenumber: scanPost.data.storeInfo.aislenumber,
                    //     aislestatus: scanPost.data.storeInfo.aislestatus,
                    //     aislestatusmsg: scanPost.data.storeInfo.aislestatusmsg,
                    //     qrTimestamp: scanPost.data.storeInfo.qrTimestamp,
                    //     qrSign: scanPost.data.storeInfo.qrSign,
                    //     isqrCode: 1,
                    //     goodCode: scanPost.data.storeInfo.goodCode,
                    //     goodName: scanPost.data.storeInfo.goodName
                    //   }
                    // });
                    let q = {
                      productId: scanPost.data.storeInfo.id,
                      cartNum: 1,
                      new: 1,
                      uniqueId: scanPost.data.productValue['默认'].unique,
                    };
                    postCartAdd(q)
                      .then(function(rescrd) {
                        that.$yrouter.push({
                          path: "/pages/order/OrderSubmission/index",
                          query: {
                            id: rescrd.data.cartId,
                            isqrCode: 1,
                            machinenum: scanPost.data.storeInfo.machineNum,
                            aislenumber: scanPost.data.storeInfo.aisleNumber,
                            aislestatus: scanPost.data.storeInfo.aisleStatus,
                            aislestatusmsg: scanPost.data.storeInfo.aisleStatusmsg,
                            qrTimestamp: scanPost.data.storeInfo.qrTimestamp,
                            qrSign: scanPost.data.storeInfo.qrSign,
                            isqrCode: 1,
                            goodCode: scanPost.data.storeInfo.goodCode,
                            goodName: scanPost.data.storeInfo.goodName
                          },
                        });

                      })
                      .catch((error) => {
                        uni.showToast({
                          title: error.response.data.msg,
                          icon: "none",
                          duration: 2000,
                        });
                      });
                  } else {
                    uni.showToast({
                      icon: 'none',
                      title: scanPost.msg
                    })
                  }
                },
                fail:function(){
                  
                }
              })

            }else{
              uni.showModal({
                content: '您还未授权登陆，请授权登陆后继续操作',
                showCancel: true,
                success(res) {
                  if (res.confirm) {
                    that.$yrouter.reLaunch({
                      path: "/pages/authorization/index",
                    })
                  }else if (res.cancel) {
                    uni.showToast({
                      icon: 'none',
                      title: '取消授权'
                    })
                  }
                }
              })
            }
          }
        } else {

        }

      }
    }
  }
</script>

<style>
  .tui-tabbar {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    -webkit-overflow-scroll: touch;
    background-color: transparent;
    background-image: url(../static/tabbar-bg.png);
    background-repeat: no-repeat;
    background-size:    contain;
  }

  .tui-tabbar-fixed {
    position: fixed;
    z-index: 99999;
    left: 0;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tui-tabbar::before {
    content: '';
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleY(0.5);
    transform-origin: 0 100%;
  }

  .tui-tabbar-item {
    height: 100%;
    flex: 1;
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: 10rpx 0;
    box-sizing: border-box;

  }

  .tui-icon-box {
    position: relative;
  }

  .tui-item-hump {
    height: 100rpx;
    z-index: 2;
    /* padding-bottom: 18px; */
    bottom: -20px;
  }

  .tui-tabbar-icon {
    width: 52rpx;
    height: 52rpx;
    display: block;
  }

  .tui-hump-box {
    width: 150rpx;
    height: 150rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -55rpx;
    border-radius: 30rpx;
    z-index: 1;
  }

  .tui-unlined::before {
    border: 0 !important
  }

  .tui-tabbar-hump {
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    top: -45rpx;
    transition: all 0.2s linear;
  }

  .tui-tabbar-hump::after {
    content: '';
    display: block;
    position: absolute;
    width: 125px;
    height: 100px;
    left: -40px;
  }

  .tui-tabbar-hump image {
    width: 100rpx;
    height: 100rpx;
    display: block;
  }


  .tui-text-hump {
    position: absolute;
    bottom: 10rpx;
  }

  .tui-text-scale {
    font-weight: bold;
    transform: scale(0.8);
    font-size: 25rpx;
    line-height: 28rpx;
    transform-origin: center 100%;
  }

  .tui-badge {
    position: absolute;
    font-size: 24rpx;
    height: 32rpx;
    min-width: 20rpx;
    padding: 0 6rpx;
    border-radius: 40rpx;
    right: 0;
    top: -5rpx;
    transform: translateX(70%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tui-badge-dot {
    position: absolute;
    height: 16rpx;
    width: 16rpx;
    border-radius: 50%;
    right: -4rpx;
    top: -4rpx;
  }
</style>
